<template>
    <div id="article">
        <Header></Header>
        <div id="content">
            <img v-if="article.img !== '' && article.img != null" :src="article.img" alt=""/>
            <h2>{{article.title}}</h2>
            <el-divider></el-divider>
            <div id="context" v-html="article.context"></div>
            <el-button class="submit" v-if="article.img !== '' && article.img != null" @click="submit">
                报名参加
            </el-button>
        </div>

        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import  {saveApply} from "../api/index"

    export default {
        name: "Article.vue",
        components:{
            Header,Footer
        },
        data(){
            return{
                article:{
                    title:'',
                    context:'',
                    img:''
                }
            }
        },
        methods:{
            init(){
                let param =this.$route.query
                this.article = param
            },
            submit(){
                let user = '';
                if(this.$store.getters.getUser){
                    user = JSON.parse(this.$store.getters.getUser)
                }
                const _this = this
                    saveApply({
                        userId: user.id,
                        fansId:_this.article.id,
                        status: _this.article.img,
                        message: _this.article.title,
                    }).then(res => {
                        console.log(res)
                        this.$message({
                            message: '报名成功',
                            type: 'success'
                        });
                        setTimeout(() => {
                            this.$router.push({
                                name: 'User'
                            })
                        }, 1000)
                    })
            }
        },
        mounted() {
            this.init()
        }
    }
</script>
<style>
    #article #content p{
        text-align: left;
    }
    #article #content img{
        margin: 10px 5vw;
        width: 50vw;
    }
    #article #content .has-text-align-center{
        text-align: center;
        font-size: 1vw;
        font-weight: bold;
    }
</style>
<style scoped>
    #context{
        margin: 0 auto;
        width: 60vw;
        font-size: 16px;
        color: rgba(68, 68, 68, .8);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        padding: 10px 10px;
        border-radius: 5px;
    }

    .submit{
        background: dodgerblue;
        color: white;
    }
</style>
